<template>
    <page-frame class="profile-setting" :goBackPage="goBackPage">
        <template #header-title>
            设置
        </template>
        <div class="main">
            <div class="main-ul">
                <div class="ul-title">通用设置</div>
                <div class="ul-list">
                    <div class="li">
                        <span> 语言 </span>
                        <span>
                            <span @click="showLangPicker = true">
                                中文简体
                                <van-icon name="arrow" />
                            </span>
                            <van-popup v-model:show="showLangPicker" round position="bottom">
                                <van-picker title="语言" :columns="langColumns" @confirm="showLangPicker = false"
                                    @cancel="showLangPicker = false;" @change="onChange" />
                            </van-popup>
                        </span>
                    </div>
                    <div class="li">
                        <span> 删除账户 </span>
                        <span>

                        </span>
                    </div>
                </div>
                <div class="ul-title">消息通知</div>
                <div class="ul-list">
                    <div class="li">
                        <span> 允许消息通知 </span>
                        <span>
                            <van-switch v-model="isNoticeMsg" />
                        </span>
                    </div>
                    <div class="li">
                        <span> 允许消息通知时响铃 </span>
                        <span>
                            <van-switch v-model="isNoticeClock" />
                        </span>
                    </div>
                </div>
                <div class="ul-title">系统信息</div>
                <div class="ul-list">
                    <div class="li">
                        <span> 最新系统安装包下载 </span>
                        <span>
                            <a class="c-p" href="http://vsuzeqbigdata/hd.apk">点击下载</a>
                        </span>
                    </div>
                    <template v-if="systemInfo">
                        <div class="li" v-if="systemInfo?.BUILD_TYPE == 'debug'">
                            <span> BUILD_TYPE </span>
                            <span>
                                {{ systemInfo?.BUILD_TYPE }}
                            </span>
                        </div>
                        <div class="li">
                            <span> 应用ID </span>
                            <span>
                                {{ systemInfo?.APPLICATION_ID }}
                            </span>
                        </div>
                        <div class="li">
                            <span> 版本信息 </span>
                            <span>
                                {{ systemInfo?.VERSION_CODE }}({{ systemInfo?.VERSION_NAME }})
                            </span>
                        </div>
                        <div class="li">
                            <span> APP名称 </span>
                            <span>
                                {{ systemInfo?.APP_NAME }}
                            </span>
                        </div>
                    </template>
                </div>
                <div class="ul-title" @click="startCanDebug">
                    <div class="w f-b">
                        <span class="fs-w-n" v-if="!isCanDebug">打包版本</span>
                        <span v-else>开发调试</span>
                        <span class="fs-w-n">{{ lastBuildVersion }}</span>
                    </div>
                </div>
                <div class="ul-list" v-if="isCanDebug">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item :title="key" :name="key" v-for="(key, f) in Object.keys(methodMap)">
                            <div class="tip-s b-s2 f-b" style="align-items:flex-end;">
                                <div v-if="methodMap[key].text.replace(/^[^|]*[|]/, '')"
                                    v-html="methodMap[key].text.replace(/^[^|]*[|]/, '').replace('\n', '<br/>')">
                                </div>
                                <van-button type="primary" class="f-s0" size="small"
                                    @click="sendMethod(key)">发送</van-button>
                            </div>
                            <div class="w tip-p b-p2 box-b p-r10 c-p" v-if="methodMap[key].result">
                                {{ methodMap[key].result }}
                            </div>
                        </van-collapse-item>

                    </van-collapse>
                </div>
            </div>
        </div>
        <!-- <page-footer style="margin-top:-120px" class="box-b p10"> 已经到达底部了 </page-footer> -->
    </page-frame>
</template>

<script lang="ts">
import { RequestCode } from '@/server/base';
import { type BaseSystemInfo, type nativeJS } from '@/server/android-vue';

declare const __APP_INFO__: any;
const { lastBuildVersion } = __APP_INFO__;

export default {
    props: {
        goBackPage: Function,
    },
    data() {
        return {
            lastBuildVersion,
            clickDebugCount: 0,
            canDebugTimeId: 0,

            showLangPicker: false,
            isNoticeMsg: false,
            isNoticeClock: false,
            langColumns: [
                { text: '中文简体', value: '中文简体' },
                { text: '中文', value: '中文' },
                { text: '中文', value: '中文' },
            ],
            systemInfo: null as BaseSystemInfo | null,

            nativeJSMethod: {} as nativeJS,

            activeNames: [],


            methodMap: {
                isConnection: { text: 'isConnection|判断是否连接成功，用来判断是否支持 nativeJS调用\n@returns boolean true 是 false 否', result: null },
                webViewReload: { text: '刷新webview', result: null },
                showNotify: { text: '发送notify 本地消息推送', result: null },
                getSystemInfo: { text: '获取系统基座信息', result: null },
                playPromptSound: { text: '发出提示音', result: null },
                playVibrator: { text: '让手机震动【长播放】', result: null },
                cancelVibrator: { text: '手机停止震动', result: null },
            } as any
        }
    },
    computed: {
        isCanDebug(): boolean {
            return this.clickDebugCount >= 10;
        }
    },
    watch: {
        isNoticeMsg(news) {
            if (news) {
                this.$toast({ message: '暂不支持该功能！' });
                this.isNoticeMsg = false;
            }
        },
        isNoticeClock(news) {
            if (news) {
                this.$toast({ message: '暂不支持该功能！' });
                this.isNoticeClock = false;
            }
        }
    },
    methods: {
        startCanDebug() {
            this.clickDebugCount++;
            clearTimeout(this.canDebugTimeId);
            this.canDebugTimeId = setTimeout(() => {
                if (!this.isCanDebug) {
                    this.clickDebugCount = 0
                }
            }, 2000);
        },
        sendMethod(methodName: string) {
            try {
                const native = (this as any).$native;
                const method = {
                    isConnection: () => native.isConnection(),
                    webViewReload: () => native.webViewReload(),
                    showNotify: () => native.showNotify('标题', new Date() + '这是一段内容文字'),
                    getSystemInfo: () => native.getSystemInfo(),
                    playPromptSound: () => native.playPromptSound(),
                    playVibrator:() => native.playVibrator(true, [1000,500,1000,500,500,200,200,100]),
                    cancelVibrator: () => native.cancelVibrator(),

 
                } as { [key: string]: Function }

                this.methodMap[methodName].result = method[methodName]();
            } catch (error) {
            }
        },
        getVersionInfo() {
            try {
                this.systemInfo = (this as any).$native.getSystemInfo();
            } catch (error) { }
        }
    },
    created() {
        setTimeout(() => {
            try {
                this.getVersionInfo();
                this.nativeJSMethod = (this as any).$native;
            } catch (error) {

            }
        }, 1000);
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/expand.scss';

.profile-setting {
    @extend .u-s-n;

    .main {
        .main-ul {
            box-sizing: border-box;
            padding: 0 20px 26px 26px;

            .ul-title {
                font-size: 16px;
                font-weight: 700;
                color: rgba(16, 39, 90, 1);
                margin-bottom: 24px;
            }

            .ul-list {
                .li {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(16, 39, 90, 1);
                    @extend .f-b, .a-i-c, .w;
                    margin-bottom: 24px;
                }
            }


        }
    }
}
</style>
